<!-- 流程参与者 -->
<template>
    <div class="w100 layout-padding">
        <el-container v-loading="groupLoading">
            <el-aside width="400px">
                <vp-card class="ml5" style="height:100%; margin-bottom:0px !important">
                    <vp-table ref="groupTableRef"
                        :data="filterGroupData" 
                        stripe border   
                        :height="`calc(100vh - 228px)`" 
                        class="w100" row-key="id"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                    >
                        <el-table-column>
                            <template #header>
                                <el-input v-model="filterText"  clearable placeholder="" />
                            </template>
                            <el-table-column :label="$t('workflowcandidate.group')" show-overflow-tooltip>
                                <template #header><vp-label zh="组" en="Group"/></template>
                                <template #default="scope"> 
                                    {{scope.row.code}}
                                    <br/>
                                    {{scope.row.name}}
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('item.operations')" width="120">
                                <template #header>
                                    <vp-label-operations/>
                                </template>
                                <template #default="scope">
                                    <el-space>
                                        <vp-btn-edit text v-auth="'systemWorkflowmodel.edit'" @click="handleGroupEdit(scope.row)"/>
                                        <vp-btn-del text v-auth="'systemWorkflowmodel.edit'" @click="handleGroupDel(scope.row)"/>
                                    </el-space> 
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </vp-table>
                    <vp-btn-add class="mt5 w100"  v-auth="'systemWorkflowmodel.edit'"  @click="handleGroupAdd"/>
                </vp-card>
            </el-aside>
            <el-main class="layout-parent ">
                <vp-main-page  v-loading="tableLoading" style="padding-top:0px !important;padding-bottom: 0px !important;">
                    <template #actions>
                        <el-space>
                            <vp-btn-add  v-if="selected.id"  @click="handleGroupUserAdd"/>
                            <b>
                                <span>{{selected.code}}</span>
                                <span> | {{selected.name}}</span>
                                <span v-if="selected.bmbs === 1"> | 匹配部门/Dept. Matching</span>
                            </b>
                        </el-space>
                    </template>
                    <template #table>
                        <vp-table ref="tableRef" :data="tableData" stripe border     style="width: 100%;" row-key="id">
                            <el-table-column  type="index" align="center" label="#">
                            </el-table-column>
                            <el-table-column :label="$t('user.username')" prop="user.realname" show-overflow-tooltip>
                                <template #header><vp-label zh="用户名" en="Account"/></template>
                            </el-table-column>
                            <el-table-column v-if="selected.bmbs === 1" :label="$t('workflowcandidate.bmbs')" prop="department.dprtname">
                                <template #header><vp-label zh="匹配部门" en="Dept. Matching"/></template>
                            </el-table-column>
                            <el-table-column :label="$t('item.operations')" fixed="right" width="100">
                                <template #header>
                                    <vp-label-operations/>
                                </template>
                                <template #default="scope">
                                    <el-space>
                                        <vp-btn-edit text v-auth="'systemWorkflowmodel.edit'" @click="handleGroupUserEdit(scope.row)"/>
                                        <vp-btn-del text v-auth="'systemWorkflowmodel.edit'" @click="handleGroupUserDel(scope.row)"/>
                                    </el-space>
                                </template>
                            </el-table-column>
                        </vp-table>
                    </template>
                </vp-main-page>
            </el-main>
        </el-container>
        <EditCandidateGroup ref="editCandidateGroupRef" @formSubmited="handleGroupFormSubmited"></EditCandidateGroup>
        <EditCandidateGroupUser :group="selected" ref="editCandidateGroupUserRef" @formSubmited="handleGroupUserFormSubmited"></EditCandidateGroupUser>
    </div>
</template>
<script setup lang="ts" name="workflowCandidate">
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import request from '/@/utils/request';

const EditCandidateGroup = defineAsyncComponent(() => import('./component/EditCandidateGroup.vue'));
const EditCandidateGroupUser = defineAsyncComponent(() => import('./component/EditCandidateGroupUser.vue'));

        const groupTableRef = ref();
        const groupLoading = ref(false);
        const filterText = ref("");
        const groupData = ref([]);
        const selected = ref({});
        const tableData = ref([]);
        const tableLoading = ref(false);

        const filterGroupData = computed(()=>{
            return groupData.value.filter((data:any)=>{
                return !filterText.value || data.code.toLowerCase().includes(filterText.value.toLowerCase())
                || data.name.toLowerCase().includes(filterText.value.toLowerCase())
            })
        })

        const loadGroup = () => {
            groupLoading.value = true;
            request.get("/workflow/candidate/group/list").then((res) => {
                groupData.value = res?.data || [];
                if(groupData.value.length > 0){
                    groupTableRef.value.tableRef.setCurrentRow(groupData.value[0]);
                }
            }).finally(() => groupLoading.value = false);
        };
        onMounted(() => {
            loadGroup();
        });

        const handleCurrentChange = (row: any)=>{
            if(row){
                selected.value = row;
                loadTableData();
            }
        }

        const loadTableData = ()=>{
            tableLoading.value = true;
            request.get(`/workflow/candidate/group/${selected.value.id}/user/list`).then((res)=>{
                tableData.value = res?.data||[];
            }).finally(()=>tableLoading.value=false);
        }

        const editCandidateGroupRef = ref();
        const handleGroupAdd = () => {
            editCandidateGroupRef.value.handleOpen('add');
        };

        const handleGroupFormSubmited = ()=>{
            loadGroup();
        }

        const handleGroupEdit = (row: any) => {
            editCandidateGroupRef.value.handleOpen('edit', row.id);
        };

        const handleGroupDel = (row: any)=>{
            VpMessageBox.confirmDelete().then(()=>{
                request.delete(`/workflow/candidate/group/${row.id}`).then(res => {
                    loadGroup();
                })
		    });
        }

        const editCandidateGroupUserRef = ref();
        const handleGroupUserAdd = () => {
            editCandidateGroupUserRef.value.handleOpen('add');
        };

        const handleGroupUserEdit = (row: any) => {
            editCandidateGroupUserRef.value.handleOpen('edit', row.id);
        };

        //删除组用户
        const handleGroupUserDel = (row: any)=>{
            VpMessageBox.confirmDelete().then(()=>{
                request.delete(`/workflow/candidate/group/user/${row.id}`).then(res => {
                    loadTableData();
                })
		    });
        }
        //组用户提交回调
        const handleGroupUserFormSubmited = ()=>{
            loadTableData();
        }

</script>
<style scoped lang="scss">
    :deep(.el-card__body){
        padding: 10px;
    }
</style>
